<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06tab栏切换</title>
    <style>
        .box{
            width: 400px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        #bottom div{
            width: 100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .green{
            background-color: green;
        }
    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("bottom").getElementsByTagName("div");
            for(var i=0;i<btns.length;i++){
                btns[i].index = i;  // 给button设置index属性，下面可以用，这是本例的难点
                btns[i].onclick = function(){
                    //alert(this.index);
                    //把所有按钮和所有div的样式去掉
                    for(var j=0;j<btns.length;j++){
                        btns[j].className="";
                    }
                    for(var k=0;k<btns.length;k++){
                        divs[k].style.display = "none";
                    }
                    //给当前按钮添加样式
                    this.className="green";
                    //获取当前点击的那个按钮的索引号，把对应索引号的div的样式显示。
                    divs[this.index].style.display = "block";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div id="top">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div id="bottom">
        <div style="display: block">1号盒子</div>
        <div>2号盒子</div>
        <div>3号盒子</div>
        <div>4号盒子</div>
        <div>5号盒子</div>
    </div>
</div>
</body>
</html>